<template>
<div class="et-top-bar">
  <div class="grid-x">

    <left-part v-if="leftPart" :icon-name="leftPart.icon" :canvas-id="leftPart.canvasId" />
    <page-title :title="pageTitle" />
    <right-part :id="rightPart.id"
                :lang="rightPart.lang"
                :noti="rightPart.noti"
                :current-user="rightPart.currentUser"
                :display-name="displayName" />

  </div>
</div>
</template>

<script>
import LeftPart from './LeftPart';
import PageTitle from './PageTitle';
import RightPart from './RightPart';

export default {
  components: {
    LeftPart,
    PageTitle,
    RightPart
  },
  props: {
    leftPart: {
      type: Object
    },
    pageTitle: {
      type: String
    },
    rightPart: {
      type: Object
    },
    displayName: {
      type: String
    }
  }
};
</script>
